<template>
  <div id="footer-nav">
    <div class="nav-item" @click="goChild($event,'work')">
      <div><span class="iconfont icon-gongzuotai icon"></span></div>
      <p>统计</p>
    </div>
    <div class="nav-item" @click="goChild($event,'order')">
      <div><span class="iconfont icon-dingdan icon"></span></div>
      <p>订单</p>
    </div>
    <div class="nav-item" @click="goChild($event,'person')">
      <div><span class="iconfont icon-wode icon"></span></div>
      <p>我的</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterNav',
  mounted() {
    //TypeNav组件挂载完毕
    var aNav = document.querySelectorAll('.nav-item');
    if(this.$route.path == '/home/work') {
      aNav[0].firstChild.classList.add("active");
      aNav[0].lastChild.classList.add("active-p");
    } else if(this.$route.path == '/home/order') {
      aNav[1].firstChild.classList.add("active");
      aNav[1].lastChild.classList.add("active-p");
    }  else {
      aNav[2].firstChild.classList.add("active");
      aNav[2].lastChild.classList.add("active-p");
    }
  },
  methods: {
    goChild(e,loc){
      this.$route.meta.isTitle = false;
      var oNav = e.currentTarget.parentElement;
      var aChild = oNav.children;
      for(var i=0; i<3; i++) {
        var oDiv = aChild[i].firstChild;
        var oP = aChild[i].lastChild;
        oDiv.classList.remove("active");
        oP.classList.remove("active-p");
      }
      e.currentTarget.firstChild.classList.add("active");
      e.currentTarget.lastChild.classList.add("active-p");
      this.$router.push(`/home/${loc}`);
      this.$route.meta.isTitle = true;
    },
  }
}
</script>

<style scoped>
  #footer-nav {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 8.8vh;
    padding-top: 1.2vh;
    border-top: .3vh solid #DDD;
  }
  #footer-nav .nav-item {
    display: inline-block;
    text-align: center;
    width: 33.33vw;
  }

  #footer-nav .nav-item>div  {
    display: inline-block;
    width: 8.4vw;
    height: 4.2vh;
    padding-top: 1.2vw;
    margin-bottom: 1vw;
    border-radius: 1vw;
    background-color: #999999;
  }
  #footer-nav .nav-item .active  {
    background-color: #29A1F7;
  }

  #footer-nav .icon  {
    font-size: 4.2vw;
    color: #fff;
  }
  
  #footer-nav .nav-item>p {
    color: #999999;
    font-size: 3.4vw;
  }

  #footer-nav .nav-item .active-p {
    color: #29A1F7;
  }
</style>